<template>
    <div class="profile-container">
      <allHead>
        <template v-slot:left>个人中心</template>
        <template v-slot:right>
          <van-icon name="setting" size="20" color="#333" @click="handleSetting" />
        </template>
      </allHead>
  
      <div class="content">
        <!-- 用户信息 -->
        <div class="user-card">
          <div class="user-info">
            <van-image
              round
              width="80"
              height="80"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
            <div class="user-detail">
              <h2>陈梦琪</h2>
              <p class="title">高级教师·数学教研组</p>
              <van-tag type="primary" plain size="medium">8项教学成果一等奖</van-tag>
            </div>
          </div>
        </div>
  
        <!-- 数据统计 -->
        <van-grid :column-num="3" class="stats-grid" :border="false">
          <van-grid-item>
            <div class="stat-item">
              <span class="stat-number">126</span>
              <span class="stat-label">备课数</span>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="stat-item">
              <span class="stat-number">98%</span>
              <span class="stat-label">课堂评分</span>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="stat-item">
              <span class="stat-number">896</span>
              <span class="stat-label">收藏数</span>
            </div>
          </van-grid-item>
        </van-grid>
  
        <!-- 最近备课 -->
        <div class="recent-card">
          <div class="section-header">
            <h3>最近备课</h3>
            <van-button plain type="primary" size="mini" @click="viewAll">查看全部</van-button>
          </div>
          
          <van-cell-group inset>
            <van-cell
              v-for="(lesson, index) in lessons"
              :key="index"
              :title="lesson.title"
              :label="lesson.date"
              :class="{ 'active-lesson': lesson.status === '进行中' }"
            >
              <template #right-icon>
                <van-tag 
                  :type="lesson.status === '已完成' ? 'success' : 'warning'"
                  plain
                  round
                >
                  {{ lesson.status }}
                </van-tag>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import allHead from "@/components/allHead.vue";
  import { ref } from 'vue'
  
  const handleSetting = () => {
    console.log('打开设置')
  }
  
  const viewAll = () => {
    console.log('查看全部备课')
  }
  
  const lessons = ref([
    {
      title: '二次函数图像与性质',
      date: '2024-01-15 14:30',
      status: '已完成'
    },
    {
      title: '数列的递推公式',
      date: '2024-01-16 10:00',
      status: '进行中'
    }
  ])
  </script>
  
  <style lang="less" scoped>
  .profile-container {
    background: #f8f9fa;
    min-height: 100vh;
  
    .content {
      padding: 16px;
  
      .user-card {
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  
        .user-info {
          display: flex;
          align-items: center;
          
          .user-detail {
            margin-left: 16px;
            
            h2 {
              margin: 0 0 6px 0;
              font-size: 20px;
              color: #1a1a1a;
            }
  
            .title {
              margin: 0 0 8px 0;
              color: #666;
              font-size: 14px;
            }
  
            .van-tag {
              font-size: 12px;
            }
          }
        }
      }
  
      .stats-grid {
        margin-bottom: 16px;
        background: #fff;
        border-radius: 12px;
        padding: 16px 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  
        .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
  
          .stat-number {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
          }
  
          .stat-label {
            font-size: 12px;
            color: #999;
          }
        }
      }
  
      .recent-card {
        background: #fff;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  
        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
  
          h3 {
            margin: 0;
            font-size: 16px;
            color: #333;
          }
        }
  
        .van-cell {
          padding: 12px 0;
          border-radius: 8px;
          margin-bottom: 8px;
          
          &::after {
            border-bottom: none;
          }
  
          &.active-lesson {
            background: #f8f9ff;
          }
  
          :deep(.van-cell__title) {
            span {
              font-weight: 500;
            }
          }
  
          :deep(.van-cell__label) {
            margin-top: 4px;
            color: #999;
          }
        }
      }
    }
  }
  </style>